<html>
	<head>
		<title>JCrop</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script src="js/jquery-1.6.2.min.js"></script>
		<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script language="javascript">
			$(document).ready(function(){
			
				$( "#slider" ).slider({
					value:0,
					min: 0,
					max: 15,
					step: 1,
					slide: function( event, ui ) {
						//$("#num").val(ui.value);
						drawImage(ui.value);
					}
				});
				
				function showPreview(x,y,w,h)
				{
					if (parseInt(w) > 0)
					{
						var rx = 245 / w;
						var ry = 181 / h;
	 
						jQuery('#preview').css({
							width: Math.round(rx * 1004) + 'px',
							height: Math.round(ry * 748) + 'px',
							marginLeft: '-' + Math.round(rx * x) + 'px',
							marginTop: '-' + Math.round(ry * y) + 'px'
						});
					}
				}
				
				function drawImage(imageNumber)
				{
					var xConer = (8+245)*(imageNumber-(Math.floor(imageNumber/4)*4));
					var yConer = (8+181)*Math.floor(imageNumber/4);
					showPreview(xConer,yConer,245,181);
				}
			});
			
			function changeImage(part,selected)
			{
				if(part == "body"){
					$("#objectBody").val(selected);
				}else if(part == "button"){
					$("#objectButton").val(selected);
				}
				$("#preview").attr('src','images/mouse-'+$("#objectBody").val()+'-'+$("#objectButton").val()+'.png');
			}
		</script>
	</head>
	<body>
		<br><br><br>
		<table align="center">
		<tr>
			<td>
				<div style="width:245px;height:181px;overflow:hidden;"><img src="images/mouse-1-1.png" id="preview" /></div>
				<input type="hidden" id="objectBody" value='1'>
				<input type="hidden" id="objectButton" value='1'>
				<br>
				<div id="slider" style="width:245px"></div>
			</td>
			<td>
				<table>
					<tr>
						<td>Button Color :</td>
						<td width="20" height="20" bgcolor="black" onclick="changeImage('button','1')"></td>
						<td width="20" height="20" bgcolor="red" onclick="changeImage('button','3')"></td>
						<td width="20" height="20" bgcolor="green" onclick="changeImage('button','2')"></td>
					</tr>
				</table>
				
				<table>
					<tr>
						<td>Body Color :</td>
						<td width="20" height="20" bgcolor="#efefef" onclick="changeImage('body','1')"></td>
						<td width="20" height="20" bgcolor="purple" onclick="changeImage('body','2')"></td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
	</body>
</html>